'use client'
import { useRouter } from 'next/navigation'
import { message, Input } from 'antd'
import { useState, useEffect } from 'react'
import styles from './styles.module.css'
import { SearchOutlined } from '@ant-design/icons';
import {scanAgentApi } from '@/services/api'

const { Search } = Input;

interface SceneCard {
  id: string
  title: string
  description: string
  imageUrl: string
  link: string
}

interface CardItemProps {
  title: string;
  description: string;
  url: string;
  link: string;
  handleCardClick: (props: CardItemProps) => void;
}

const CardItem = (props: CardItemProps) => {
  const {title, description, url, link, handleCardClick} =  props;
  return (
    <div className={styles.cardsItem} onClick={() => handleCardClick(props)}>
      <div className={styles.txt}>
        <div>{title}</div>
        <div>{description}</div>
      </div>
      <div className={styles.img}>
        <img src={url} alt="" style={{width: '100%' , height:'100%'}}/>
      </div>
    </div>
  )
}


// API 请求函数
const fetchSceneCards = async (): Promise<SceneCard[]> => {
  try {
    const response = await scanAgentApi.getDetails()
    return response
  } catch (error) {
    message.error('获取数据失败，请稍后重试')
    // 返回模拟数据作为后备
    return [
      {
        id: '1',
        title: '交通事故监测',
        description: '实时监测路面状况，快速识别交通事故（如碰撞、翻车等）并第一时间发送预警信息，紧急应急响应。',
        imageUrl: '/images/accident.png',
        link: '/scan-agent/accident-monitoring'
      },
      {
        id: '2',
        title: '违规行为识别',
        description: '利用视觉分析非机动车违法运行、闯红灯、超速等违法行为，分类记录并自动执法介入。',
        imageUrl: '/images/violation.png',
        link: '/scan-agent/violation-detection'
      },
      {
        id: '3',
        title: '交通流量监测与预测',
        description: '对路段交通量进行监测与统计，同时，基于历史交通数据及实时路况，对未来不同时段的交通流量进行预测。',
        imageUrl: '/images/flow.png',
        link: '/scan-agent/traffic-flow'
      },
      {
        id: '4',
        title: '网络监测与诊断',
        description: '通过视频与实时流量数据，实时检测网络产生故障，提供智能化故障定位服务及解决方案。',
        imageUrl: '/images/network.png',
        link: '/scan-agent/network-monitoring'
      },
      {
        id: '5',
        title: '行人与非机动车安全监控',
        description: '检测行人与非机动车在各类路况、非机动车违法行为等，快速采取及时有效的处理。',
        imageUrl: '/images/pedestrian.png',
        link: '/scan-agent/pedestrian-safety'
      },
      {
        id: '6',
        title: '停车秩序管理',
        description: '监测道路两侧违停现象，对违停车辆抓拍取证并通知相关执法部门。',
        imageUrl: '/images/parking.png',
        link: '/scan-agent/parking-management'
      },
      {
        id: '7',
        title: '道路隐患分析',
        description: '结合历史数据和实时视频监控，分析道路交通风险，生成区域通行状态、拥堵分析、事故率等深度报告。',
        imageUrl: '/images/road-analysis.png',
        link: '/scan-agent/road-analysis'
      }
    ]
  }
}

const AgentPage = () => {
  const router = useRouter()
  const [sceneCards, setSceneCards] = useState<SceneCard[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true)
        const data = await fetchSceneCards()
        setSceneCards(data)
      } catch (error) {
        message.error('加载数据失败')
      } finally {
        setLoading(false)
      }
    }
    loadData()
  }, [])

  const handleCardClick = (props: CardItemProps) => {
    router.push(props.link);
  }

  return (
    <div className={styles.agentContainer}>
      <div className={styles.agentSearch}>
         <Input placeholder="" />
         <div className={styles.searchBtn} onClick={() => {alert('搜索')}}>
          <SearchOutlined />
         </div>
      </div>
      <div className={styles.cardsWrapper}>
        {sceneCards.map(item => {
          const {title, description, imageUrl, link} = item;
          return (
            <CardItem 
              key={item.id}
              title={title}
              description={description}
              url={imageUrl}
              link={link}
              handleCardClick={handleCardClick}
            />
          )
        })}
      </div>

      
    </div>
  )
}

export default AgentPage
